<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 5//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <title>Test dojox.form.Uploader</title>
	<link href="../../../dijit/themes/dijit.css" rel="stylesheet" />
	<link href="../../../dijit/themes/claro/Common.css" rel="stylesheet" />
	<link href="../../../dijit/themes/claro/form/Common.css" rel="stylesheet" />
	<link href="../../../dijit/themes/claro/form/Button.css" rel="stylesheet" />

	<link href="../resources/UploaderFileList.css" rel="stylesheet" />
	<style>
		@import "../../../dijit/tests/css/dijitTests.css";
		html, body{
			font-family:sans-serif;
		}
		.browseButton{
			width:300px;
			/*height:20px;*/
			font-weight:bold;
			margin:10px 0 2px 0;
		}
		.dijitTabPane{
			padding:20px;
		}
		fieldset{
			text-align:right;
			padding: 5px;
		}
		input[type=text]{
			width:135px;
		}
		.dijitButton{
			margin-top:15px;
		}
		.dojoxUploaderFileList{
			text-align:left;
			margin-top:10px;
		}
		.pageTable{
			width:100%;
		}
		.pageTable td{
			vertical-align:top;
		}
		#colForm{
			width:330px;
		}
		#colImages{
			padding-top:7px;
		}
		.thumb{
			border:1px solid #ccc;
			padding:5px;
			width:123px;
			background:#eee;
			float:left;
			margin:0 5px 5px 0;
		}
		.thumbbk{
			background:#fff;
			display:block;
		}
		.thumb img{
			border:1px solid #ccc;
			width:120px;
		}
		.form, .html5, .iframe, .flash{
			display:none;
		}
		.Form .form, .HTML5 .html5, .IFrame .iframe, .Flash .flash{
			display:block;
		}
		#dialog p{
			width:310px;
		}
		form{
			margin-bottom:15px;
		}
		code{
			font-family:monospace;
			white-space:nowrap;
		}
		.browseButton, .browseButton .dijitButton, .browseButton .dijitButtonNode {
			display:block;
		}
		.dijitUploadDisplayInput {
			width:100px;
		}
	</style>
	<script>
		dojoConfig = {
			async:1,
			isDebug:true
		}
	</script>
	<script src="../../../dojo/dojo.js"></script>
	<script>
		require([
			'dojo/_base/connect',
			'dojo/_base/array',
			'dojo/dom',
			'dojo/dom-construct',
			'dijit/registry',
			'dojo/parser',
			'dojo/domReady!',
			'dijit/form/Button',
			'dojox/form/Uploader',
			'dojox/form/uploader/FileList'
		],
		function(cn, arrayUtil, dom, domConst, registry, parser){

			parser.parse();

			var
				uploader=registry.byId("uploader"),
				uploader2=registry.byId("uploader2"),
				
				handleUpload = function(upl, node){
					cn.connect(upl, "onComplete", function(dataArray){
						arrayUtil.forEach(dojo.isArray(dataArray)?dataArray:[dataArray], function(file){
							console.log("display:", file)
	
							var div = dojo.create('div', {className:'thumb'});
							var span = dojo.create('span', {className:'thumbbk'}, div);
							var img = dojo.create('img', {src:file.file}, span);
							node.appendChild(div);
						});
					});
				},
				handleDnD = function(domnode, uploader){
					if(uploader.addDropTarget && uploader.uploadType=='html5'){
						domConst.create('div',{innerHTML:'Drag and Drop files to this fieldset'}, domnode,'last');
						uploader.addDropTarget(domnode);
					}
				};
			
			cn.connect(registry.byId("remBtn"), "onClick", uploader, "reset");
			cn.connect(registry.byId("remBtn2"), "onClick", uploader2, "reset");
			handleUpload(uploader, dom.byId('colImages'));
			handleUpload(uploader2, dom.byId('colImages'));
			if(require.has('file-multiple')){
				handleDnD(uploader.domNode.parentNode, uploader);
				handleDnD(uploader2.domNode.parentNode, uploader2);
			}
		});


	</script>
</head>
<body class="claro">
    <h1>Test dojox/form/Uploader</h1>
	<p style="font-size:14px; border:2px solid #ff0000; padding:3px;">
		<strong>NOTE:</strong> This test does upload,
		but the server scripts are renamed to <code>tests/UploadFile.php.<strong>disabled</strong></code> and
		<code>tests/cLOG.php.<strong>disabled</strong></code> to prevent security attacks on hosted servers.
		You should rename these files (removing <code>.disabled</code>) in your local copy to conduct tests.
	</p>
	<p class="flash">
		The Flash feature will use a SWF to upload in non-HTML5 browsers. All other browsers will use the HTML5 plugin,
		unless <code>force="flash"</code> is used, then Flash will be used in all browsers. <code>force="flash"</code>
		is provided because Flash has some features that HTML5 does not yet have. But it is still not
		recommended because of the many problems that Firefox and Webkit have with the Flash plugin.
	</p>
	<p class="HTML5">When HTML5 feature is in use, drag &amp; drop of files to the fieldset is supported.</p>

	<table class="pageTable" role="presentation">
		<tr>
			<td id="colForm">
				<form method="post" action="UploadFile.php" id="myForm" enctype="multipart/form-data" >
					<fieldset>
						<legend>Block Browse Button Form Post Test</legend>
						<input class="browseButton" data-dojo-props='name:"uploadedfile", multiple:true, force:"html5", label:"Select Some Files", isDebug:true, uploadOnSelect:true' type="file" data-dojo-type="dojox/form/Uploader" id="uploader"/>
						<input type="text" name="album" value="Summer Vacation" aria-label="album" />
+						<input type="text" name="year" value="2011" aria-label="year" />
						<input type="button" id="remBtn" label="Clear" data-dojo-type="dijit/form/Button" />
						<input type="submit" label="Submit" data-dojo-type="dijit/form/Button" />
						<div id="files" data-dojo-type="dojox/form/uploader/FileList" data-dojo-props='uploaderId:"uploader"' ></div>
					</fieldset>
				</form>
				<form method="post" action="UploadFile.php" id="myForm2" enctype="multipart/form-data" >
					<fieldset>
						<legend>Inline Browse Button Form Post Test</legend>
						inline control <div data-dojo-type="dojox/form/Uploader" id="uploader2" data-dojo-props="name:'uploadedfile',showInput:'before',isDebug:true">Browse</div>
						<input type="text" name="album" value="Summer Vacation" aria-label="album" />
+						<input type="text" name="year" value="2011" aria-label="year" />
						<input type="button" id="remBtn2" label="Clear" data-dojo-type="dijit/form/Button" />
						<input type="submit" label="Submit" data-dojo-type="dijit/form/Button" />
						<div id="files2" data-dojo-type="dojox/form/uploader/FileList" data-dojo-props='uploaderId:"uploader2"'></div>
					</fieldset>
				</form>
			</td>
			<td id="colImages">
			</td>
		</tr>
	</table>
	<a href="./images/attach.png" target='_blank'>Link to test #15285</a>
</body>
</html>
